<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的云相册</title>

    <link rel="stylesheet" type="text/css" th:href="@{/css/bulma.min.css}">

    <script type="text/javascript" th:src="@{js/jquery-3.3.1.js}"></script>
    <script type="text/javascript" th:src="@{js/all.js}"></script>
    <!--<script defer src="https://use.fontawesome.com/releases/v5.4.1/js/all.js"-->
    <!--integrity="sha384-L469/ELG4Bg9sDQbl0hvjMq8pOcqFgkSpwhwnslzvVVGpDjYJ6wJJyYjvG3u8XW7"-->
    <!--crossorigin="anonymous"></script>-->
</head>
<body>
<div class="container">
    <div class="modal-area">
        <div class="modal" id="img-modal">
            <div class="modal-background"></div>
            <div class="modal-content">
                <p class="image">
                    <img id="img-modal-img">
                </p>
            </div>
            <button class="modal-close is-large" aria-label="close" onclick="closeModal1()"></button>
            <script type="text/javascript">
                function closeModal1() {
                    $("#img-modal").removeClass("is-active");
                }
            </script>
        </div>
        <div class="modal" id="info-modal">
            <div class="modal-background"></div>
            <div class="modal-card">
                <header class="modal-card-head">
                    <p class="modal-card-title info-title">Modal title</p>
                </header>
                <section class="modal-card-body">
                    <!-- Content ... -->
                    <div class="content">
                        <p class="info-name"></p>
                        <p class="info-author"></p>
                        <p class="info-size"></p>
                        <p class="info-upload-date"></p>
                        <p class="info-is-water-mark"></p>
                    </div>

                </section>
                <footer class="modal-card-foot">
                    <button class="button is-danger info-del">删除</button>
                    <button class="button is-success" onclick="closeModal2()">关闭</button>
                    <script type="text/javascript">
                        function closeModal2() {
                            $("#info-modal").removeClass("is-active");
                        }
                    </script>
                </footer>
            </div>
        </div>
        <div class="modal" id="water-mark-modal">
            <div class="modal-background"></div>
            <div class="modal-card">
                <header class="modal-card-head">
                    <p class="modal-card-title water-mark-title">添加水印</p>
                </header>
                <section class="modal-card-body">
                    <!-- Content ... -->
                    <div class="content">
                        <!--<p class="water-mark-name"></p>-->
                        <div class="field">
                            <div class="control">
                                <h5>输入需要添加的水印的文字</h5>
                                <input class="input is-primary water-mark-input" type="text" placeholder="输入水印内容">
                            </div>
                        </div>
                        <br>
                        <h5>选择水印位置</h5>
                        <div class="select is-rounded is-primary">
                            <select class="water-mark-loc-sel">
                                <option>左上角</option>
                                <option>右上角</option>
                                <option>中心</option>
                                <option>左下角</option>
                                <option>右下角</option>
                            </select>
                        </div>
                        <br>
                        <br>
                        <h5>选择水印颜色</h5>
                        <div class="select is-rounded is-primary">
                            <select class="water-mark-color-sel">
                                <option>白色</option>
                                <option>黑色</option>
                                <option>红色</option>
                                <option>绿色</option>
                                <option>蓝色</option>
                            </select>
                        </div>
                        <br>
                        <br>
                        <h5>选择字体样式</h5>
                        <div class="control">
                            <label class="radio">
                                <input class="radio-normal-font" type="radio" name="water-mark-font-style" checked>
                                正常
                            </label>
                            <label class="radio">
                                <input type="radio" name="water-mark-font-style">
                                斜体
                            </label>
                        </div>
                    </div>

                </section>
                <footer class="modal-card-foot">
                    <button class="button is-danger water-mark-cancel" onclick="closeModal3()">取消</button>
                    <button class="button is-success water-mark-add">为我添加水印</button>
                    <script type="text/javascript">
                        function closeModal3() {
                            $("#water-mark-modal").removeClass("is-active");
                        }
                    </script>
                </footer>
            </div>
        </div>
    </div>
    <div class="columns">
        <div class="column is-one-fifth">
            <div class="card">
                <div class="card-image">
                    <figure class="image is-4by3">
                        <img th:src="@{/image/cover.JPG}" alt="logo">
                    </figure>
                </div>
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="image is-48x48">
                                <img th:src="@{/image/cover.JPG}" alt="logo">
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-4" th:text="${username}"></p>
                            <p class="subtitle is-6">@ineffable</p>
                        </div>
                    </div>
                    <div class="content">
                        <p th:text="|总大小: ${quota_total} GB|"></p>
                        <p class="quota-have-used">已使用: 正在计算...</p>
                        <p class="have-upload-count"></p>
                    </div>
                    <button class="button is-warning" id="login-out">退出登录</button>
                </div>
            </div>
            <br>
            <div class="file has-name is-boxed is-primary">
                <label class="file-label">
                    <div class="file-inputs-div">
                        <input class="file-input" type="file" accept="image/*" multiple>
                    </div>
                    <span class="file-cta">
                        <span class="file-icon">
                            <i class="fas fa-cloud-upload-alt"></i>
                        </span>
                        <span class="file-label">上传图片</span>
                        <span class="file-label">单张<10M，最多5张/次</span>
                    </span>
                    <div class="file-lists">
                    </div>
                </label>

            </div>
            <br>
            <div class="upload-btn-div" style="display: none">
                <button class="button is-primary upload-btn">上传</button>
            </div>
            <br>
        </div>

        <div class="column is-one-fifth" id="image-show-col1"></div>
        <div class="column is-one-fifth" id="image-show-col2"></div>
        <div class="column is-one-fifth" id="image-show-col3"></div>

        <div class="column is-one-fifth info-area"></div>

    </div>


    <footer class="footer my-footer">
        <div class="content has-text-centered">
            <p>
                <strong>@author</strong> <a href="https://ineffable.page">lss</a>
            </p>
        </div>
    </footer>


</div>
</body>
<style type="text/css">
    html body {
        /*background: url("/image/cover.JPG") no-repeat center center fixed;*/
        height: 100vh;
        width: 100%;
    }

    .my-footer {
        position: fixed;
        padding-top: 0;
        padding-bottom: 0;
        left: 0;
        bottom: 0;
        width: 100%;
    }
</style>
</html>